<template>
  <div
    class="homePage"
    v-loading="tableLoading"
    element-loading-text="加载中..."
  >
    <div class="top">
      <el-button type="primary" @click="addCol" ref="myButton"
        >增加一行</el-button
      >
      <el-button type="primary" @click="delCol">删除一行</el-button>
      <el-button type="primary" @click="dialogVisible = true"
        >打开弹出框</el-button
      >
      <el-date-picker
        ref="datePicker"
        style="margin-left: 12px"
        v-model="dateValue"
        type="date"
        placeholder="Pick a day"
        @change="dateChange"
      />
      <!-- <el-input
        v-model="inputVal"
        :autofocus="true"
        style="width: 220px; margin-left: 12px"
        placeholder="请输入"
      /> -->
    </div>
    <div class="footer">
      <!-- <div class="container" ref="container" @mousewheel="handleMouseWheel">
        <div v-for="item in 50" :key="item" class="item"></div>
      </div> -->
      <el-table
        ref="myTable"
        :data="tableData"
        style="width: 100%"
        height="100%"
        :border="true"
        v-load-more="{
          func: loadmore,
          target: '.el-scrollbar__wrap',
          delay: 50,
        }"
        @row-click="rowClick"
        @mouseenter="handleMouseenter"
        @mouseleave="handleMouseleave"
      >
        <el-table-column prop="date" label="时间" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="address" label="地址" />
        <template #append>
          <div style="text-align: center; line-height: 40px">{{ content }}</div>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="sizes, prev, pager, next"
          v-model:page-size="pageSize"
          :page-sizes="[20, 40, 60]"
          :total="100"
        />
      </div>
    </div>
    <MyDialog
      v-model="dialogVisible"
      title="这是标题"
      content-color="#f00"
      @handleBtn="handleSaveAndCancel"
    >
      <template #header>
        <div>标题</div>
      </template>
      <template #content>
        <div class="content">这是内容</div>
      </template>
      <template #footer>
        <span>12312</span>
      </template>
    </MyDialog>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import MyDialog from '@/components/MyDialog.vue'
  // const inputVal = ref('')
  const content = ref('')
  const total = 60
  // 表格加载更多
  const loadmore = () => {
    if (tableData.value.length == total) {
      content.value = '没有更多数据了'
      return
    }
    tableLoading.value = true
    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        tableData.value.push({
          date: window['$Dayjs']().format('YYYY年MM月DD日 hh时mm分ss秒'),
          name: '小XX' + (tableData.value.length + 1),
          address:
            '手打速度啊更待何时呀u更大合计手打嘎哈就送达嘎哈就送达高级啊是撒估计很大',
        })
      }
      console.log('加载更多')
      tableLoading.value = false
    }, 500)
  }
  // const $ElMessageBox = inject('$ElMessageBox')
  // const $ElMessage = inject('$ElMessage')
  // const $Dayjs = inject('$Dayjs')
  const tableData = ref([]) //表格数据
  const tableLoading = ref(false)
  const pageSize = 20 //页数

  const dialogVisible = ref(false) // 控制弹出框
  const handleSaveAndCancel = val => {
    console.log(val)
  }
  console.log(
    window['$Dayjs']().startOf('week').add(1, 'day').format('YYYY-MM-DD')
  )
  console.log(
    window['$Dayjs']().endOf('week').add(1, 'day').format('YYYY-MM-DD')
  )
  // const container = ref(null)
  // const handleMouseWheel = e => {
  //   console.log(e)
  //   const moveForwardStep = 1
  //   const moveBackStep = -1
  //   let step = 0

  //   if (e.wheelDelta > 0) {
  //     step = moveForwardStep * 20
  //   } else {
  //     step = moveBackStep * 20
  //   }
  //   container.value.scrollLeft += step
  // }

  // console.log(window['$Api'].test.numQuire(10, 20))

  // 日期选择器
  const dateValue = ref(new Date())
  const dateChange = val => {
    console.log(val)
  }
  // 新增一行
  const addCol = () => {
    window['$ElMessageBox']
      .confirm('是否确定新增?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        tableData.value.push({
          date: window['$Dayjs']().format('YYYY年MM月DD日 hh时mm分ss秒'),
          name: '小XX' + (tableData.value.length + 1),
          address:
            '手打速度啊更待何时呀u更大合计手打嘎哈就送达嘎哈就送达高级啊是撒估计很大',
        })
        window['$ElMessage']({
          type: 'success',
          message: 'Add completed',
        })
      })
      .catch(() => {
        window['$ElMessage']({
          type: 'info',
          message: 'Cancel completed',
        })
      })
  }
  // 删除一行
  const delCol = () => {
    tableData.value.pop()
  }

  // 点击表格某行
  const rowClick = row => {
    console.log(row)
  }

  // const myTable = ref(null)
  // const timer = ref(null)
  // //自动循环播放
  // const autoCycle = () => {
  //   //拿到相关元素
  //   const wrapper = myTable.value.layout.table.refs
  //   const tableWrapper = wrapper.bodyWrapper.firstElementChild.firstElementChild
  //   // console.log(tableWrapper.clientHeight)
  //   // console.log(tableWrapper.scrollHeight)
  //   if (tableWrapper.scrollHeight > tableWrapper.clientHeight) {
  //     timer.value = setInterval(() => {
  //       // 元素自增距离顶部1像素
  //       tableWrapper.scrollTop += 1
  //       // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
  //       if (
  //         tableWrapper.clientHeight + tableWrapper.scrollTop ==
  //         tableWrapper.scrollHeight
  //       ) {
  //         // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
  //         tableWrapper.scrollTop =
  //           tableWrapper.scrollTop - tableWrapper.scrollHeight / 2
  //       }
  //     }, 15)
  //   }
  // }

  const handleMouseenter = () => {
    // clearInterval(timer.value)
  }
  const handleMouseleave = () => {
    // autoCycle()
  }

  const datePicker = ref(null)
  // 挂载完成
  onMounted(() => {
    // console.log(datePicker.value)
    tableLoading.value = true
    let arr = []
    for (let i = 0; i < 20; i++) {
      arr.push({
        date: window['$Dayjs']().format('YYYY年MM月DD日 hh时mm分ss秒'),
        name: '小XX' + (i + 1),
        address:
          '手打速度啊更待何时呀u更大合计手打嘎哈就送达嘎哈就送达高级啊是撒估计很大',
      })
    }
    tableData.value = [...arr]
    setTimeout(() => {
      tableLoading.value = false
      // autoCycle()
    }, 300)
  })
</script>

<style lang="scss" scoped>
  .homePage {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px;
    .top {
      .count {
        color: #f00;
        font-size: 20px;
        font-weight: bold;
      }
    }
    .footer {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      //   background: burlywood;
      padding: 12px 0;
      .pagination {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .container {
    width: 800px;
    height: 400px;
    margin: 0 auto;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    .item {
      background: #f00;
      flex-shrink: 0;
      width: 50px;
      height: 100%;
      margin-right: 10px;
    }
  }
  // ::v-deep {
  //   .el-loading-mask {
  //     background: rgba(122, 122, 122, 0.8);
  //   }
  // }
</style>
